<template>
	<view class="content">
		<view class="date-container">
			<view class="date-text">日期：</view>
			<picker v-if="showDate" mode="date" :value="date" fields="date" @change="bindDateChange">
				<view class="date-content">
					<view style="color: black; flex-grow: 1;">{{date}}</view>
					<view class="date-separator"></view>
					<img class="date-icon" src="/static/ic_date.png" alt="日期图标">
				</view>
			</picker>
			<picker v-if="showMonth" mode="date" :value="date" fields="month" @change="bindDateChange">
				<view class="date-content">
					<view style="color: black; flex-grow: 1;">{{date}}</view>
					<view class="date-separator"></view>
					<img src="/static/ic_date.png" alt="日期图标">
				</view>
			</picker>
			<picker v-if="showYear" mode="date" :value="date" fields="year" @change="bindDateChange">
				<view class="date-content">
					<view style="color: black; flex-grow: 1;">{{date}}</view>
					<view class="date-separator"></view>
					<img src="/static/ic_date.png" alt="日期图标">
				</view>
			</picker>

		</view>
		
		<view class="container-fluid container-fluid-bg1">
			<view class="row">
			  <!-- 第一行 -->
			  <view class="text-row line">
					<view class="text1" style="color: #ffd323; font-size: 34rpx;" >工厂总消耗</view>
					<view class="text2">电能KWH</view>
					<view class="text3">燃气㎡</view>
			  </view>
		
			  <!-- 第二行 -->
			 <view class="text-row line">
			   <view class="text1">采集值</view>
			   <view class="text2">{{totalData.elecCollection}}</view>
			   <view class="text3">{{totalData.gasCollection}}</view>
			 </view>
		
			  <!-- 第三行 -->
			  <view class="text-row line">
				<view class="text1">表值</view>
				<view class="text2">{{totalData.elecMeter}}</view>
				<view class="text3">{{totalData.gasMeter}}</view>
			  </view>
			  
			  <view class="text-row line">
				<view class="text1">差额</view>
				<view class="text2">{{totalData.elecDiff}}</view>
				<view class="text3">{{totalData.gasDiff}}</view>
			  </view>
			</view>
		</view>
		<view class="container-fluid container-fluid-bg2">
			  <view class="row">
				<!-- 第一行 -->
				<view class="text-row line">
					<view class="text1" style="color: #ffd323; font-size: 34rpx;" >铸造车间</view>
					<view class="text2">电能KWH</view>
					<view class="text3">燃气㎡</view>
			  </view>
		  
				<!-- 第二行 -->
				<view class="text-row line">
					  <view class="text1">{{dateLabel1}}</view>
					  <view class="text2">{{yzShopData.today_elec}}</view>
					  <view class="text3">{{yzShopData.today_gas}}</view>
				</view>
							
				 <!-- 第三行 -->
				 <view class="text-row line">
						<view class="text1">{{dateLabel2}}</view>
						<view class="text2">{{yzShopData.yesterday_elec}}</view>
						<view class="text3">{{yzShopData.yesterday_gas}}</view>
				 </view>
				 
				 <view class="text-row line">
						<view class="text1">环比</view>
						<view class="text2">{{yzShopData.rate_elec}}%</view>
						<view class="text3">{{qlShopData.rate_gas}}%</view>
				 </view>
			  </view>
			</view>
			
		<view class="container-fluid container-fluid-bg3">
				<view class="row">
				  <!-- 第一行 -->
				  <view class="text-row line">
						<view class="text1" style="color: #ffd323; font-size: 34rpx;" >清理车间</view>
						<view class="text2">电能KWH</view>
						<view class="text3">燃气㎡</view>
				  </view>
			
				  <!-- 第二行 -->
				 <view class="text-row line">
				   <view class="text1">{{dateLabel1}}</view>
				   <view class="text2">{{qlShopData.today_elec}}</view>
				   <view class="text3">{{qlShopData.today_gas}}</view>
				 </view>
			
				  <!-- 第三行 -->
				  <view class="text-row line">
					<view class="text1">{{dateLabel2}}</view>
					<view class="text2">{{qlShopData.yesterday_elec}}</view>
					<view class="text3">{{qlShopData.yesterday_gas}}</view>
				  </view>
				  
				  <view class="text-row line">
					<view class="text1">环比</view>
					<view class="text2">{{qlShopData.rate_elec}}%</view>
					<view class="text3">{{qlShopData.rate_gas}}%</view>
				  </view>
				</view>
		</view>
		
		<view class="container-workshop"><!-- 三列 -->
			<view class="container-fluid-2 container-fluid-2-bg1" style="margin-left: 6px;">
				<view class="row">
				  <view class="text-row line" style="margin-top: 10px;">
						<view class="text1" style="color: #ffd323; font-size: 34rpx;" >机加车间</view>
				  </view>
							
				<view class="text-row line">
				  <view class="text1" style="font-size: 12px;padding-left: 30px;color: #ffd323;">电能KWH</view>
				</view>
				
				 <view class="text-row line">
				   <view class="text1" style="font-size: 12px;">{{dateLabel1}}</view>
				   <view class="text2" style="font-size: 12px;padding-left: 40px;">{{jgShopData.today_elec}}</view>
				 </view>
							
				  <view class="text-row line">
					<view class="text1" style="font-size: 12px;">{{dateLabel2}}</view>
					<view class="text2" style="font-size: 12px;padding-left: 40px;">{{jgShopData.yesterday_elec}}</view>
				  </view>
				  
				  <view class="text-row line">
					<view class="text1" style="font-size: 12px;">环比</view>
					<view class="text2" style="font-size: 12px;padding-left: 40px;">{{jgShopData.rate_elec}}%</view>
				  </view>
				</view>
			</view>
			
			<view class="container-fluid-2 container-fluid-2-bg2">
				<view class="row">
				  <view class="text-row line" style="margin-top: 10px;">
						<view class="text1" style="color: #ffd323; font-size: 34rpx;" >空压机房</view>
				  </view>
							
				<view class="text-row line">
				  <view class="text1" style="font-size: 12px;padding-left: 30px;color: #ffd323;">电能KWH</view>
				</view>
				
				 <view class="text-row line">
				   <view class="text1" style="font-size: 12px;">{{dateLabel1}}</view>
				   <view class="text2" style="font-size: 12px;padding-left: 40px;">{{kyjShopData.today_elec}}</view>
				 </view>
							
				  <view class="text-row line">
					<view class="text1" style="font-size: 12px;">{{dateLabel2}}</view>
					<view class="text2" style="font-size: 12px;padding-left: 40px;">{{kyjShopData.yesterday_elec}}</view>
				  </view>
				  
				  <view class="text-row line">
					<view class="text1" style="font-size: 12px;">环比</view>
					<view class="text2" style="font-size: 12px;padding-left: 40px;">{{kyjShopData.rate_elec}}%</view>
				  </view>
				</view>
			</view>
			
			<view class="container-fluid-2 container-fluid-2-bg3" style="margin-right: 6px;">
				<view class="row">
				  <view class="text-row line" style="margin-top: 10px;">
						<view class="text1" style="color: #ffd323; font-size: 34rpx;" >办公区域</view>
				  </view>
							
				<view class="text-row line">
				  <view class="text1" style="font-size: 12px;padding-left: 30px;color: #ffd323;">电能KWH</view>
				</view>
				
				 <view class="text-row line">
				   <view class="text1" style="font-size: 12px;">{{dateLabel1}}</view>
				   <view class="text2" style="font-size: 12px;padding-left: 40px;">{{workShopData.today_elec}}</view>
				 </view>
							
				  <view class="text-row line">
					<view class="text1" style="font-size: 12px;">{{dateLabel2}}</view>
					<view class="text2" style="font-size: 12px;padding-left: 40px;">{{workShopData.yesterday_elec}}</view>
				  </view>
				  
				  <view class="text-row line">
					<view class="text1" style="font-size: 12px;">环比</view>
					<view class="text2" style="font-size: 12px;padding-left: 40px;">{{workShopData.rate_elec}}%</view>
				  </view>
				</view>
			</view>
		
		</view>
			  
		<view class="date-container" style="margin-top: 20rpx;height: 120rpx;">
			<view class="date-text" style="font-size: 26rpx;">统计维度 设备类型：</view>
			<view style="width: 240rpx;">
				<uni-data-select v-model="value" :localdata="energyTypeData" @change="energyTypeChange" :clear="false"></uni-data-select>
			</view>
		</view>
			  
		<view class="charts-box">
		  <qiun-data-charts type="column" @getIndex="chartTap1" :opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true},extra:{column:{seriesGap:2,width:10,barBorderCircle:true}}}" :chartData="chartData1"/>
		</view>
		
		<view class="charts-box">
		  <qiun-data-charts type="column" @getIndex="chartTap2" :opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true},extra:{column:{seriesGap:2,width:10,barBorderCircle:true}}}" :chartData="chartData2"/>
		</view>
		
		<view class="charts-box" v-if="dateType!=0">
		  <qiun-data-charts type="column" :opts="{dataLabel:false,color:['#5dbddf','#637ae9'],xAxis:{rotateLabel:true},extra:{column:{seriesGap:2,width:10,barBorderCircle:true}}}" :chartData="chartData3"/>
		</view>
	</view>
</template>

<script>
	
	import * as util from '../../common/util.js'
	import {GetEnergyTotalComsumption,GetEnergyWorkshopComsumption,GetEnergyStatisticsWorkshop,
	GetEnergyStatisticsDevice,GetEnergyStatisticsDate} from '../../common/energy_api.js'
		
	function getDate(showDate, showMonth, showYear) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		if (showDate) {
			return `${year}-${month}-${day}`;
		} else if (showMonth) {
			return `${year}-${month}`;
		} else{
			return `${year - 1}`;
		}
	}
	

	
	export default {
		data() {
			return {
				showDate:true,
				showMonth:false,
				showYear:false,
				dateType:0, //0:日 1:月 2:年
				dateLabel1: "今日",
				dateLabel2: "昨日",
				date:"2024-02-25",
				buttonRect: {},
				totalData: {}, // 工厂总消耗
				yzShopData: {}, // 压铸车间
				qlShopData: {}, // 清理车间
				jgShopData: {}, // 机加车间
				kyjShopData: {}, //空压机房
				workShopData: {},//办公区域
				shopDetailData: [],//车间详细数据
				shopDeviceDetailData:[],//车间设备及详细数据
				value:0,
				energyTypeData:[
					{
						value:0,
						text:"电能"
					},
					{
						value:1,
						text:"燃气"
					}
				],
				chartData1:{},
				chartData2:{},
				chartData3:{}
			}
		},
		// #ifdef H5
		onReady() {
			this.getNodeInfo();
			var result = getDate(this.showDate, this.showMonth, this.showYear);
			this.date = result;
			window.addEventListener('resize', this.getNodeInfo);
			uni.setNavigationBarTitle({
				title: "日能源消耗"
			})
			this.loadData();
			this.loadShopDetailData();
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.getNodeInfo)
		},
		// #endif
		onNavigationBarButtonTap(e) {
			console.log("click menu");
			const that = this;
			uni.showActionSheet({
				title: '操作',
				itemList: ['日能源消耗', '月度能源消耗', '年能源消耗'],
				popover: {
					// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
					top: that.buttonRect.top + 104  + that.buttonRect.height,
					left: that.buttonRect.left + that.buttonRect.width / 2
				},
				success: (e) => {
					console.log(e.tapIndex);
					if (e.tapIndex == 0){
						uni.setNavigationBarTitle({
							title: "日能源消耗"
						})
						this.showDate = true;
						this.showMonth = false;
						this.showYear = false;
						this.dateType = 0;
						this.dateLabel1 = "今日";
						this.dateLabel2 = "昨日";
					} else if (e.tapIndex == 1){
						uni.setNavigationBarTitle({
							title: "月度能源消耗"
						})
						this.showDate = false;
						this.showMonth = true;
						this.showYear = false;
						this.dateType = 1;
						this.dateLabel1 = "上一月";
						this.dateLabel2 = "选择月";
					} else if (e.tapIndex == 2){
						uni.setNavigationBarTitle({
							title: "年度能源消耗"
						})
						this.showDate = false;
						this.showMonth = false;
						this.showYear = true;
						this.dateType = 2;
						this.dateLabel1 = "上一年";
						this.dateLabel2 = "选择年";
					}
					var result = getDate(this.showDate, this.showMonth, this.showYear);
					this.date = result;
					this.loadData();
					this.loadShopDetailData();
				}
			})
		},
		methods: {
			loadData(){
				var lastDate;
				if (this.dateType == 0){
					lastDate = util.getLastDate(this.date);
				} else if (this.dateType == 1){
					lastDate = util.getLastDate(this.date);
				} else {
					lastDate = util.getLastDate(this.date);
				}
				console.log("获取能源总消耗.date:" + lastDate + ",dateType:" + this.dateType);
				var data = { date:this.date,dateType:this.dateType};
				GetEnergyTotalComsumption(data).then(res=>{
					this.totalData = res[0];
				});
				
				//铸造车间
				data = {
				        date: lastDate,
						dateType: this.dateType,
						workshop: "压铸车间"
				    };
				GetEnergyWorkshopComsumption(data).then(res=>{
					this.yzShopData = res[0];
				});
				//清理车间
				data = {
				        date: lastDate,
						dateType: this.dateType,
						workshop: "清理车间"
				    };
				GetEnergyWorkshopComsumption(data).then(res=>{
					this.qlShopData = res[0];
				});
				
				//机加车间
				data = {
				        date: lastDate,
						dateType: this.dateType,
						workshop: "机加车间"
				    };
				GetEnergyWorkshopComsumption(data).then(res=>{
					this.jgShopData = res[0];
				});
				
				//空压机房
				data = {
				        date: lastDate,
						dateType: this.dateType,
						workshop: "空压机房"
				    };
				GetEnergyWorkshopComsumption(data).then(res=>{
					this.kyjShopData = res[0];
				});
				
				//办公区域
				data = {
				        date: lastDate,
						dateType: this.dateType,
						workshop: "办公区域"
				    };
				GetEnergyWorkshopComsumption(data).then(res=>{
					this.workShopData = res[0];
				});
			},
			
			//获取车间数据
			loadShopDetailData(){
				console.log("loadShopDetailData");
				var data = {
				        date: this.date,
						dateType: this.dateType,
						energyType: this.energyTypeData[this.value].text
				    };
				GetEnergyStatisticsWorkshop(data).then(res=>{
					this.shopDetailData = res;
					
					var shopArray = [];//车间数组
					var qtDataArray=[];//前天数据数组
					var ztDataArray=[];//昨天数据数组
					for (var i = 0; i < this.shopDetailData.length; i++) {
						var item = this.shopDetailData[i];
						shopArray[i] = item.workshop;
						qtDataArray[i] = item.value_qt;
						ztDataArray[i] = item.value_zt;
					}	
					var label1;
					var label2;
					if (this.dateType == 0){
						label1 = "前天";
						label2 = "昨天";
					} else if (this.dateType == 1){
						label1 = "上月";
						label2 = "本月";
					} else{
						label1 = "去年";
						label2 = "今年";
					}
					var data1 = {
					  categories: shopArray,
					  series: [
					    {
					      name: label1,
					      data: qtDataArray
					    },
					    {
					      name: label2,
					      data: ztDataArray
					    }
					  ]
					};
					this.chartData1 = JSON.parse(JSON.stringify(data1));
					this.loadShopDeviceDetailData(shopArray[0]);
				});
			},
			
			//获取车间设备详细数据
			loadShopDeviceDetailData(workshop){
				console.log("loadShopDeviceDetailData:workshop=" + workshop);
				var data = {
				        date: this.date,
						dateType: this.dateType,
						energyType: this.energyTypeData[this.value].text,
						workshop: workshop
				    };
				GetEnergyStatisticsDevice(data).then(res=>{
					this.shopDeviceDetailData = res;
					
					var deviceArray = [];//车间数组
					var qtDataArray=[];//前天数据数组
					var ztDataArray=[];//昨天数据数组
					for (var i = 0; i < this.shopDeviceDetailData.length; i++) {
						var item = this.shopDeviceDetailData[i];
						deviceArray[i] = item.device_code;
						qtDataArray[i] = item.value_qt;
						ztDataArray[i] = item.value_zt;
					}	
					
					var label1;
					var label2;
					if (this.dateType == 0){
						label1 = "前天(" + workshop + ")";
						label2 = "昨天(" + workshop + ")";
					} else if (this.dateType == 1){
						label1 = "上月(" + workshop + ")";
						label2 = "本月(" + workshop + ")";
					} else{
						label1 = "去年(" + workshop + ")";
						label2 = "今年(" + workshop + ")";
					}
					
					var data1 = {
					  categories: deviceArray,
					  series: [
					    {
					      name: label1,
					      data: qtDataArray
					    },
					    {
					      name: label2,
					      data: ztDataArray
					    }
					  ]
					};
					this.chartData2 = JSON.parse(JSON.stringify(data1));
					if (this.dateType != 0){
						this.loadDeviceDateData(deviceArray[0]);
					}
				});
			},
			
			loadDeviceDateData(deviceCode){
				console.log("loadDeviceDateData.deviceCode=" + deviceCode)
				var data =  {
				        date: this.date,
						energyType: this.energyTypeData[this.value].text,
						deviceCode: deviceCode
				    };
				GetEnergyStatisticsDate(this.dateType, data).then(res =>{
					var result = res;
					
					var dateArray = [];
					var valueArray =[];
					for (var i = 0; i < result.length; i++) {
						var item = result[i];
						dateArray[i] = item.date_str;
						valueArray[i] = item.value;
					}	
					
					var data1 = {
					  categories: dateArray,
					  series: [
					    {
					      name: "能源(" + deviceCode + ")",
					      data: valueArray
					    }
					  ]
					};
					this.chartData3 = JSON.parse(JSON.stringify(data1));
				});
			},
			
			bindDateChange: function(e) {
				if (this.date == e.detail.value){
					return;
				}
				this.date = e.detail.value
				console.log("date=" + this.date);
				this.loadData();
			},
			
			// #ifdef H5
			getNodeInfo() {
				uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
					const rect = ret[0]
					if (rect) {
						this.buttonRect = rect
					}
				});
			},
			// #endif
			
			energyTypeChange(e){
				this.loadShopDetailData();
			},
			
			chartTap1(e){
				var index = e.currentIndex.index;
				var item = this.shopDetailData[index];
				console.log("chartTap1.index=", index)
				console.log("chartTap1.item=", item)
				this.loadShopDeviceDetailData(item.workshop);
			},
			
			chartTap2(e){
				if (this.dateType == 0) return;
				var index = e.currentIndex.index;
				var item = this.shopDeviceDetailData[index];
				this.loadDeviceDateData(item.device_code);
			}
			
			
		},
		
	}
</script>

<style lang="scss" scoped>
	
	@import url("energy.css");

</style>
